import React, { Component } from 'react';
import { Modal, Button, message, Row, Col } from 'antd';
import equal from 'deep-equal';
import { WeaDialog, WeaRightMenu, WeaTop, WeaSearchGroup, WeaTools, WeaFormItem, WeaInput, WeaTab, WeaLocaleProvider, WeaShare } from 'ecCom';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaTableNew, WeaSwitch } from 'comsMobx';

const WeaTable = WeaTableNew.WeaTable;
import { Condition } from '../list/customCondition';
import BusinessInfo from '../customer/BusinessInfo';

const getLabel = WeaLocaleProvider.getLabel;
@inject('customerCardStore')
@observer
class CustomerBaseAboutDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      passwdValue: '',
      repasswdValue: '',
    };
  }
  shouldComponentUpdate() {
    return true;
  }
  render() {
    const { visible } = this.state;
    const { contentStore } = this.props;
    const { modalInfo, showDilog, isShowModal, customerMermgeForm, statusChangeForm, form, businessTab, businessSelectKey, businessInfoData, bussessMsgCode, tableStore, isShowShareDialog, showShareDilog } = contentStore;
    const { customerId, customerName, userId } = this.props.customerCardStore;
    return (

      <div>
        {

          <WeaShare
            ecId={`${this && this.props && this.props.ecId || ''}_WeaShare@nv9emq`}
            visible={isShowShareDialog}
            onVisibleChange={bool => showShareDilog(false)}
            shareParams={{
              resourcetype: 7, // 当前共享数据的类型（同PC浏览按钮的type，例如: 152: 流程
              resourceid: customerId, // 分享数据的id
            }}
            msginfo={[
              {
                sharetitle: customerName, // 消息名片中间一栏显示
                // desc: customerName,//描述，可以不填
                linkurl: `/common/chatResource/view.html?resourcetype=7&resourceid=${customerId}&isfromchatshare=1&sharer=${userId}&firstSharer=${userId}&moduleid=em`, // 消息链接地址（必填）
                canforward: 1, // 消息是否允许转发 1：是（默认） 0：否
                callbackurl: `/api/common/chatResource/addshare?resourcetype=7&resourceid=${customerId}&isfromchatshare=1&firstSharer=${userId}`, // 消息转发回调地址（非必填）
                sharetypename: getLabel(520326, '客户名片'), // 消息名片上一栏  分享消息的标题栏
                showimage: '/images/p.png',
                sharetype: 'crm',
                shareid: customerId,
                opentype: 1, // 移动端打开方式 1:app内打开（默认） 2：手机默认浏览器打开
                opentype_pc: 2, // PC端打开方式 1:应用内打开（默认） 2：PC默认浏览器打开
              },
            ]}
          />

        }
        <WeaDialog
          ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@c7wuot`}
          title={modalInfo.modalTitle || ''}
          icon="icon-coms-crm"
          iconBgcolor="#96358a"
          visible={isShowModal}
          style={modalInfo.modalStyle}
          buttons={
            modalInfo.modalType !== 'business' && [
              <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@wzm8tl@save`} type="primary" onClick={() => { this.doSave(modalInfo.modalType); }} >{getLabel(86, '保存')}</Button>,
              <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ofljpp@close`} onClick={() => { showDilog(false); }}>{getLabel(309, '关闭')}</Button>,
            ]}
          onCancel={() => { showDilog(false); }}
        >
          {
            modalInfo.modalType == 'customerMerge' &&
            <Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@rheu91`} condition={customerMermgeForm} form={form} col={1} />
          }
          {
            modalInfo.modalType == 'statusChange' &&
            <Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@qrwyyc`} condition={statusChangeForm} form={form} col={1} />
          }
          {
            (modalInfo.modalType == 'applyPortal' || modalInfo.modalType == 'setPasswd') &&
            <div>
              {this.getApplyPortal()}
            </div>
          }

          {
            modalInfo.modalType == 'business' &&
            <div>
              <WeaTab
                ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@1m6a1s`}
                datas={businessTab.slice()}
                keyParam="key" // 主键
                selectedKey={businessSelectKey}
                onChange={this.changeData}
              />
              <div style={{ height: 670, overflow: 'auto' }}>
                {
                  businessSelectKey == '1' &&
                  <BusinessInfo ecId={`${this && this.props && this.props.ecId || ''}_BusinessInfo@6rtqty`} data={toJS(businessInfoData)} hasright={bussessMsgCode} />
                }
                {
                  businessSelectKey == '2' &&
                  <WeaTable
                    ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@k6csus`}
                    comsWeaTableStore={tableStore}
                    hasOrder
                    needScroll
                  />
                }
              </div>
            </div>
          }
        </WeaDialog>


      </div>
    );
  }
    getApplyPortal=() => {
      const { passwdValue, repasswdValue } = this.state;
      return (
        <div className="wea-crm-form">
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9vt4nx`} className="wea-content" >
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@q2javv`} className="wea-form-cell" span={24}>
              <div style={{ paddingLeft: '27px' }}>
                <WeaFormItem
                  ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@d7lldn`}
                  label={getLabel(409, '密码')}
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 14 }}
                >
                  <WeaInput
                    ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@ync7xm`}
                    type="text"
                    viewAttr={3}
                    passwordStrength
                    value={passwdValue}
                    onChange={value => this.setState({ passwdValue: value })}
                  />
                </WeaFormItem>
                <WeaFormItem
                  ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@uhzbaw`}
                  label={getLabel(501, '确认密码')}
                  labelCol={{ span: 6 }}
                  wrapperCol={{ span: 14 }}
                >
                  <WeaInput
                    ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@14qxoq`}
                    type="text"
                    viewAttr={3}
                    value={repasswdValue}
                    onChange={value => this.setState({ repasswdValue: value })}
                  />
                </WeaFormItem>
              </div>

            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@qed5vt`} span="24">
              <div style={{ paddingLeft: '20px', marginTop: '5px' }}><span style={{ color: '#f50', marginRight: '2px' }}>*</span>{getLabel(15736, '注意事项')}：</div>
              <div style={{ paddingLeft: '30px' }}>1、{getLabel(31864, '密码只能输入数字或字母，不能输入其它符号或文字')};</div>
              <div style={{ paddingLeft: '30px' }}>2、{getLabel(31862, '密码最少输入6位，最多20位')}</div>
            </Col>
          </Row>
        </div>
      );
    }
    doSave=(type) => {
      const { customerMergeSave, statusChangeSave, customerId, applyPortalSave, setPasswdSave } = this.props.contentStore;
      const { passwdValue, repasswdValue } = this.state;
      if (type == 'customerMerge') {
        customerMergeSave(customerId);
      }
      if (type == 'statusChange') {
        statusChangeSave(customerId);
      }
      if (type == 'applyPortal' || type == 'setPasswd') {
        if (passwdValue && repasswdValue) {
          if (passwdValue == repasswdValue) {
            if (this.checkPasswd()) {
              { type == 'applyPortal' && applyPortalSave({ customerId, method: 'updatePassword', passwordnew: passwdValue }); }
              { type == 'setPasswd' && setPasswdSave({ customerId, method: 'updatePassword', passwordnew: passwdValue }); }
              this.setState({ passwdValue: '', repasswdValue: '' });
            } else {
              Modal.warning({
                title: getLabel(15172, '系统提示'),
                content: getLabel(31862, '密码最少输入6位，最多20位'),
                okText: getLabel(33703, '确定'),
              });
            }
          } else {
            Modal.warning({
              title: getLabel(15172, '系统提示'),
              content: getLabel(15803, '密码与确认密码不符合!'),
              okText: getLabel(33703, '确定'),
            });
          }
        } else {
          Modal.warning({
            title: getLabel(15172, '系统提示'),
            content: getLabel(15859, '必要信息不完整，红色标记为必填项！'),
            okText: getLabel(33703, '确定'),
          });
        }
      }
    }
    checkPasswd=() => {
      const { passwdValue } = this.state;
      let istrue = false;
      const reName = new RegExp(/^[A-Za-z0-9]*$/g);
      if (reName.test(passwdValue) && (passwdValue.length >= 6 && passwdValue.length <= 20)) {
        istrue = true;
        return istrue;
      }
      istrue = false;
      return istrue;
    }
    changeData=(key) => {
      const { contentStore } = this.props;
      const { customerId } = contentStore;
      contentStore.changeBussessTab(key, customerId);
    }
}

export default CustomerBaseAboutDialog;
